<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <!-- 第一种写法 -->
        <!-- <RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{ news.title }}</RouterLink> -->
        <!-- 第二种写法 -->
        <RouterLink 
            :to="{
                path:'/news/detail',
                query:{
                    id:news.id,
                    title:news.title,
                    content:news.content
                }
            }"

            >
            {{ news.title }}
        </RouterLink>

    
    </li>
    </ul>
    <!-- 展示区 -->
    <div class="news-content">
        <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts" name="News">
import { reactive } from "vue";

const newsList = reactive([
  {
    id: "01",
    title: "科学家成功培育抗旱水稻",
    content:
      "经过多年努力，科学家们终于成功培育出一种抗旱水稻，将有望帮助解决全球粮食安全问题。",
  },
  {
    id: "02",
    title: "医疗技术突破：新型治疗癌症方法问世",
    content:
      "一项新型的癌症治疗技术近日问世，据称在临床试验中取得了显著疗效，给患者带来了新希望。",
  },
  {
    id: "03",
    title: "太空探索再迈重要一步：首次发现类地行星",
    content:
      "天文学家宣布，在外太空观测中首次发现一颗类地行星，这一发现或许将改变我们对宇宙的认知。",
  },
  {
    id: "04",
    title: "环保新举措：全国范围内禁止塑料袋使用",
    content:
      "为了推动环境保护工作，政府决定从即日起全国范围内禁止生产、销售和使用塑料购物袋，倡导绿色环保生活方式。",
  },
  {
    id: "05",
    title: "体育界震撼：新晋球王横空出世",
    content:
      "一位年轻选手在最新一场比赛中表现抢眼，以惊人的实力问鼎冠军，成为体坛新晋球王，引发广泛关注和讨论。",
  },
]);
</script>

<style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}
.news li > a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967e;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news li::marker {
    color: #64967e;
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>
